  
 let banner = document.querySelector('.banner>.banbox');
 let ul = document.querySelector('.banner>.banbox>ul');
 let ulis = document.querySelectorAll('.banner>.banbox>ul>li');
 let olis = document.querySelectorAll('.banner>.banbox>ol>li');
 let prev = document.querySelector('.banner>.banbox>.left');
 let next = document.querySelector('.banner>.banbox>.right');




  // 定义一个开关变量
  let flag = true;
  // 1.1 克隆元素
  function setUI() {
    // 克隆第一张和最后一张图片的li
    let firstLi = ulis[0].cloneNode(true);
    let lastLi = ulis[ulis.length - 1].cloneNode(true);
    // 分别到ul的最后面和最前面
    ul.appendChild(firstLi);
    ul.insertBefore(lastLi, ulis[0]);
    // 重新获取一下ulis并设置ul宽度
    ulis = document.querySelectorAll('ul>li');
    ul.style.width = ulis.length * ulis[0].clientWidth + 'px';
    // 设置默认显示的图片
    ul.style.left = -ulis[0].clientWidth + 'px'
  }
  setUI()

  // 2. 自动轮播
  let n = 1;
  let timer;
  timer = setInterval(() => {
    if (!flag) return;
    flag = false;
    n++;
    // 调用运动函数显示li的图片
    run();
  }, 2500);

  // 3. 鼠标移入移出暂停和启动自动轮播
  banner.onmouseenter = () => { // 鼠标移入
    clearInterval(timer)
  };
  banner.onmouseleave = () => { // 鼠标移出
    // 当鼠标移出的时候，我要立即显示下一张图片
    if (!flag) return;
    flag = false;
    n++;
    run();
    // 启动自动轮播，开定时器
    timer = setInterval(() => {
      if (!flag) return;
      flag = false;
      n++;
      // 调用运动函数显示li的图片
      run();
    }, 2500)
  }

  // 4. 点击上一张和下一张显示图片轮播
  prev.onclick = () => { // 点击上一张
    if (!flag) return;
    flag = false;
    n--;
    run();
  }
  next.onclick = () => { // 点击下一张
    if (!flag) return;
    flag = false;
    n++;
    run();
  }

  // 5. 点击小圆点显示轮播
  // 给每一个小圆点绑定点击事件
  for (let i = 0; i < olis.length; i++) {
    olis[i].onclick = () => { // i+1就是要显示图片li的索引
      if (!flag) return;
      flag = false;
      n = i + 1;
      run();
    }
  }


  // 封装运动函数调用方法
  function run() {
    move(ul, {
      left: -n * ulis[0].clientWidth
    }, () => {
      // 如果n = 4,这表示上一张显示的是最后一张图片，重新给n赋值1
      if (n === 5) {
        n = 1
      }
      // 如果n = 0,表示上一张显示的是第一张，重新给n赋值3
      if (n === 0) {
        n = 4;
      }
      ul.style.left = -n * ulis[0].clientWidth + 'px';
      // 先清除所有小圆点的active样式
      for (let i = 0; i < olis.length; i++) {
        olis[i].className = ''
      }
      olis[n - 1].className = 'active';

      // 显示运动结束的时候，将开关打开
      flag = true;
    })
  }



  

  function move(ele, styleObj, fn) {
    let timerObj = {};
    for (const attr in styleObj) {
      let curStyle;
      if (attr === 'opacity') {
        curStyle = getStyle(ele, attr) * 100;
        styleObj[attr] = styleObj[attr] * 100;
      } else {
        curStyle = parseInt(getStyle(ele, attr));
      }
      timerObj[attr] = setInterval(() => {
        let goLength = (styleObj[attr] - curStyle) / 10;
        goLength = goLength > 0 ? Math.ceil(goLength) : Math.floor(goLength);
        curStyle += goLength;
        if (curStyle === styleObj[attr]) {
          clearInterval(timerObj[attr]);
          delete timerObj[attr];
          Object.keys(timerObj).length === 0?fn():'';
        } else {
          ele.style[attr] = attr==='opacity'?curStyle/100:curStyle+'px';
        }
      }, 20)
    }
  }
  /**
   * 封装获取元素样式的函数
   * @param {Object} ele  要获取样的元素
   * @param {String} style 获取的演示名称
   * @return {String}  返回元素对应的样式值
   */
  function getStyle(ele, style) {
    try {
      return window.getComputedStyle(ele)[style];
    } catch (error) {
      return ele.currenStyle[style];
    }
  }


  // 鼠标点击切换的
  $('.tab>.box>ul>li').click(function(){
    $(this).addClass('active').siblings().removeClass('active')
    .parent().next().find('li').hide().eq($(this).index()).show();
  })



  // 尾部鼠标移动切换
  $('.we>.box>ul>li').mouseenter(function(){
    $(this).css({backgroundColor: '#c0c4c7',
      color:' #fff',}).siblings().css({backgroundColor: '#797979',color:' #999',}).parent().next().find('ol').hide().eq($(this).index()).show()
  })

  // 鼠标点击返回顶部
  $(window).scroll(()=>{
   $('.fh>.box>li').last().click(()=>{
     let n=$(window).scrollTop();
     let timer=setInterval(()=>{
       n-=30;
       $(window).scrollTop(n);
       if(n<=0){
         clearInterval(timer)
       }
     },20)
   })
  })